<template>
  <div>
    <el-form
      inline
      ref="msgForm"
      size="small"
      :model="msgForm"
      label-width="100px"
      class="form1"
    >
      <el-form-item label="联合国编号" prop="unCode">
        <el-input
          v-model="msgForm.unCode"
          placeholder="请输入联合国编号"
        ></el-input>
      </el-form-item>

      <el-form-item label="中文名称" prop="chnNameAndDescribe">
        <el-input
          v-model="msgForm.chnNameAndDescribe"
          placeholder="请输入中文名称"
        ></el-input>
      </el-form-item>

      <el-form-item label=" " label-width="40px">
        <el-button type="warning" @click="formSearch">查询</el-button>
        <el-button type="primary" @click="resetForm('msgForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table1">
      <el-table :data="tableData" stripe height="calc(100vh - 280px)">
        <el-table-column type="index" label="序号" width="width">
        </el-table-column>
        <el-table-column prop="unCode" label="联合国编号" width="width">
        </el-table-column>
        <el-table-column prop="category" label="项目类别" width="width">
          <template slot-scope="scope">
            {{getDictValue(categoryList,scope.row.category)}}
          </template>
        </el-table-column>
        <el-table-column prop="chnAlias" label="别名" width="width">
        </el-table-column>
        <el-table-column prop="commonForm" label="常见形式" width="width">
        </el-table-column>
        <el-table-column prop="sign" label="标记标识牌" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="scope">
            <el-button
              class="btn1"
              size="mini"
              type="primary"
              @click="detailItem(scope.row.id)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="pagination1"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.current"
      :page-size="query.size"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    ></el-pagination>
    <!-- 新增/修改 -->
    <el-dialog
      title="查看知识库"
      :visible.sync="popFlag"
      v-if="popFlag"
      :close-on-click-modal="false"
      append-to-body
      custom-class="dialog1"
      width="40%"
    >
      <div class="boxCont">
        <div class="item">
          <div class="itemTitle">基础信息</div>
          <div class="textCont">
            项目类别&nbsp;&nbsp;&nbsp;{{ itemDetail.category }}
          </div>
          <div class="textCont">
            别名&nbsp;&nbsp;&nbsp;{{ itemDetail.chnAlias }}
          </div>
          <div class="textCont">
            常见形式&nbsp;&nbsp;&nbsp;{{ itemDetail.category }}
          </div>
          <div class="textCont">
            标记标识牌&nbsp;&nbsp;&nbsp;{{ itemDetail.category }}
          </div>
        </div>
        <div class="item">
          <div class="itemTitle">安全指导</div>
          <div class="textCont">{{ itemDetail.guideDesc }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">公众安全</div>
          <div class="textCont">{{ itemDetail.publicSecurity }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">危险信息</div>
          <div class="textCont">{{ itemDetail.potentialHarm }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">储运要求</div>
          <div class="textCont">{{ itemDetail.storageTranspReq }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">防护措施</div>
          <div class="textCont">{{ itemDetail.protectMeasures }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">泄漏处理</div>
          <div class="textCont">{{ itemDetail.leakHandle }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">急救</div>
          <div class="textCont">{{ itemDetail.firstAid }}</div>
        </div>
        <div class="item">
          <div class="itemTitle">灭火方法</div>
          <div class="textCont">{{ itemDetail.fireFighting }}</div>
        </div>
      </div>
      <template slot="footer">
        <el-button class="btn2" @click="popFlag = false">返 回</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getDetail } from "@/common/api/knowledgebase/knowDang.js";
import template from '@/views/supervisionInspection/inspectionSupervision/project/template.vue';
export default {
  components: { template },
  props: {},
  data() {
    return {
      msgForm: {},
      query: {
        current: 1,
        size: 10,
        total: 0,
      },
      //审核状态
      checkStat: {
        0: "未审核",
        1: "审核通过",
        2: "审核未通过",
      },
      tableData: [],
      popFlag: false,
      itemDetail: {},
      categoryList:[],
    };
  },
  created() {},
  mounted() {
    this.getDictYw("category").then((res) => {
      this.categoryList = res;
    });
    this.formSearch();
  },
  methods: {
    // 查询
    formSearch() {
      console.log(this.msgForm);
      this.getList(this.query, this.msgForm);
    },
    //分页接口
    async getList(query, params) {
      let res = await getList(query, params);
      this.tableData = res.data.data.records;
      this.query = {
        current: res.data.data.current,
        size: res.data.data.size,
        total: res.data.data.total,
      };
    },
    //详情
    detailItem(id) {
      getDetail(id).then((res) => {
        console.log(res);
        this.itemDetail = res.data.data;
        this.popFlag = !this.popFlag;
      });
    },
    //审核
    checkItem(id) {
      checkType(id).then((res) => {
        console.log(res);
      });
    },
    //读取字典
    getDictValue(list, value) {
      let target = list.filter((v) => v.value == value)[0];
      return (target && target.label) || "-";
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 分页
    handleCurrentChange(val) {
      this.query.current = val;
      this.formSearch();
    },
    // 更改页码数量
    handleSizeChange(val) {
      this.query.size = val;
      this.formSearch();
    },
  },
};
</script>

<style lang='scss' scoped>
/deep/.el-dialog__body {
  padding-left: 0;
  padding-right: 0;
}
.boxCont {
  margin: 0 auto;
  .item {
    border-bottom: 1.5px solid #ddd;
    .textCont {
      padding: 0 8%;
      margin-bottom: 10px;
    }
  }
}
.itemTitle {
  margin: 0 8%;
  color: #409eff;
  // width: 130px;
  font-size: 18px;
  text-align: left;
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  position: relative;
}
.itemTitle::before {
  content: "";
  width: 2px;
  height: 20px;
  background: #409eff;
  position: absolute;
  left: 0px;
  top: 15px;
}
</style>